<template>
  <div>
    <el-checkbox-group
      v-model="checkedIds"
      @change="checkBindPerms()">
    <el-table
      ref="treeTable"
      size="mini"
      :data="permsData"
      style="width: 100%;margin-top: 10px;"
      row-key="id"
      max-height="300px"
      default-expand-all
      stripe
      border
      :tree-props="{children: 'children'}">
      <el-table-column
        prop="text"
        label="菜单"
        width="180">
        <template slot="header" slot-scope="scope">
          菜单
          <span class="head-btns">
            <a class="text-primary" @click="checkAllMenus()">全选</a>
            <a class="text-primary" @click="checkAllMenus(false)">取消全选</a>
          </span>
        </template>
        <template slot-scope="scope">
          <span v-if="scope.row.attributes.type === 'menu'">
            <el-checkbox size="mini" :label="scope.row.id">
              <el-badge is-dot class="state-dot" :type="scope.row.available&&scope.row.available===1?'success':'danger'" />
              {{scope.row.text}}
            </el-checkbox>
          </span>
        </template>
      </el-table-column>

      <el-table-column
        prop="btns"
        label="操作">
        <template slot="header" slot-scope="scope">
          操作
          <span class="head-btns">
            <a class="text-primary" @click="checkAllBtns()">全选</a>
            <a class="text-primary" @click="checkAllBtns(false)">取消全选</a>
          </span>
        </template>
        <template slot-scope="scope">
          <el-checkbox size="mini" v-for="item in scope.row.btnChildren" :key="item.id"
            :label="item.id">
            <el-badge is-dot class="state-dot" :type="item.available&&item.available===1?'success':'danger'" />
            {{item.text}}</el-checkbox>
        </template>
      </el-table-column>
    </el-table>
    </el-checkbox-group>
  </div>
</template>

<script>
  export default {
    name: "PermissionTree",
    model: {
      prop: 'mval',
      event: 'modelValue'
    },
    props: ['mval', 'resources'],
    watch: {
      mval: {
        handler() {
          this.checkedIds = this.mval;
        },
        immediate: true,
        deep: true
      }
    },
    data() {
      return {
        permsData: [],
        allMenuIds: [],
        allBtnIds: [],
        checkedIds: []
      }
    },
    mounted: function() {
      this.api.post('/bucket-system/system/resources/all', {})
        .then((data) => {
          this.parseDatas(data.data);

          this.permsData = data.data;
        });
    },
    methods: {
      checkBindPerms() {
        this.$emit('modelValue', this.checkedIds);
      },
      /**
       * 递归循环将按钮和菜单分开，以便树形表格使用，顺带记录id，供全选使用
       * @param list
       * @returns {{btns: Array, menus: Array}}
       */
      parseDatas(list) {
        let btns = [];
        let menus = [];
        list.forEach((d) => {
          if(d.attributes.type === "button") {
            btns.push(d);
            this.allBtnIds.push(d.id);
          } else {
            menus.push(d);
            this.allMenuIds.push(d.id);
          }

          let child = this.parseDatas(d.children);
          d.btnChildren = child.btns;
          d.children = child.menus;
        });
        return {btns: btns, menus: menus};
      },
      checkAllBtns(uncheck) {
        let cj = this.allMenuIds.filter((v) => {
          return this.checkedIds.indexOf(v) > -1
        });
        if(uncheck!==false)
          cj = cj.concat(this.allBtnIds);
        this.checkedIds = cj;

        this.checkBindPerms();
      },
      checkAllMenus(uncheck) {
        let cj = this.allBtnIds.filter((v) => {
          return this.checkedIds.indexOf(v) > -1
        });
        if(uncheck!==false)
          cj = cj.concat(this.allMenuIds);
        this.checkedIds = cj;

        this.checkBindPerms();
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .state-dot {
    position: relative;
    top: 3px;
  }
  .head-btns {
    float: right;
  }
</style>
